<style lang="less" scoped>
.detail-box{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .detail-item {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        padding: 8px;
        .detail-label {
            font-weight: 700;
            &::after {
                content: '：';
            }
        }
    }
}
</style>

<template>
    <div class="detail-box">
        <div class="detail-item">
            <div class="detail-label">小区名称</div>
            <div class="detail-text">{{village.name}}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">所属地区</div>
            <div class="detail-text">{{village.regionName}}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">占地面积</div>
            <div class="detail-text">{{village.coveredArea}}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">建筑面积</div>
            <div class="detail-text">{{village.builtArea}}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">容积率</div>
            <div class="detail-text">{{village.volume}}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">绿化率</div>
            <div class="detail-text">{{village.greenRate}}%</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">规划车位</div>
            <div class="detail-text">{{village.planParkCount}}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">车位配比</div>
            <div class="detail-text">{{village.parkRatio}}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">规划楼栋</div>
            <div class="detail-text">{{village.planFloorCount}}栋</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">规划户数</div>
            <div class="detail-text">{{village.planFamilyCount}}户</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">物业公司</div>
            <div class="detail-text">{{village.propertyCompany}}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">物业费</div>
            <div class="detail-text">{{village.propertyFee}}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">供暖方式</div>
            <div class="detail-text">{{village.heating}}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">供水</div>
            <div class="detail-text">{{village.water}}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">供电</div>
            <div class="detail-text">{{village.electric}}</div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import Village from "@/store/entities/estate/Village";
@Component({
    components: {}
})
export default class  extends AbpBase {
    @Prop({
        type: Object,
        default: new Village()
    })
    village: Village;
}
</script>